<!--
 * @Author: dumin
 * @Date: 2025-07-28 09:45:04
 * @Description: 商品列表
 * @LastEditors: dumin
 * @LastEditTime: 2025-07-28 16:07:28
-->
<template>
  <el-dialog :visible.sync="dialogVisible" width="85%" @open="open" @closed="closed" title="选择商品列表">
    <div class="dialog-wrapper">
      <div class="dialog-wrapper__header">
        <div class="dialog-wrapper__header--query">
          <div class="query-item">
            商品名称<el-input v-model="formInline.goodsName"></el-input>
          </div>
          <el-button type="primary" @click="search()">查询</el-button>
        </div>
      </div>

      <div class="dialog-wrapper__content">
        <el-table :data="tableData" style="width: 100%" v-loading="tableLoading" ref="multipleTableRef"
          :header-cell-style="{ background: '#ebecf0', color: '#606266' }" border row-key="goodsId" height="540px"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column prop="goodsSeq" label="商品编码" width="160" show-overflow-tooltip></el-table-column>
          <el-table-column prop="goodsName" label="商品名称" width="160" align="left"
            show-overflow-tooltip></el-table-column>
          <el-table-column prop="goodsTypeName" label="商品分类" width="160" align="left"
            show-overflow-tooltip></el-table-column>
          <el-table-column prop="unitName" label="计量单位" align="left"></el-table-column>
          <el-table-column align="center" prop="picture" label="图片">
            <template slot-scope="scope">
              <img :src="scope.row.picture.picUrl" v-if="scope.row.picture != '' && scope.row.picture != null"
                width="70" @click="$seeImage" height="50" />
            </template>
          </el-table-column>
          <el-table-column prop="isBuyLimit" label="是否限购" width="120" align="center">
            <template slot-scope="scope">{{ scope.row.isBuyLimit === 1 ? '是' : '否' }}</template>
          </el-table-column>
          <el-table-column prop="goodsStyle" label="商品类型" width="120" align="center">
            <template slot-scope="scope">{{ scope.row.goodsStyle === 1 ? '普通商品' : scope.row.goodsStyle === 2 ? '宴席商品' :
              scope.row.goodsStyle === 3 ? '生日活动专属' : "预售商品" }}</template>
          </el-table-column>
          <el-table-column prop="salePrice" label="建议零售价" align="right" :formatter="fixData"></el-table-column>
          <el-table-column prop="memberPrice" label="会员价" align="right" :formatter="fixData"></el-table-column>
          <el-table-column prop="saleLowerPrice" label="商品限价" align="right" :formatter="fixData"></el-table-column>
        </el-table>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <div class="dialog-footer__content">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 50, 100, 150, 200]" :current-page="listQuery.current" :page-size="listQuery.size"
          layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
        <div>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" :loading="loading" @click="handleConfirm">确 定</el-button>
        </div>
      </div>
    </span>
  </el-dialog>
</template>

<script>
import {
  getProductList
} from "@/api/product";
export default {
  name: 'ShopDialog',
  props: {
    show: { type: Boolean, default: false },
    goodsIds: { type: Array, default: () => [] },
  },
  data() {
    return {
      loading: false,
      formInline: {
        goodsName: '',
        status: 1,
      },
      tableData: [],
      tableLoading: false,
      total: 0,
      listQuery: {
        current: 1,
        size: 100
      },

      checkList: [],
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
    open() {
      this.checkList = [...this.goodsIds];
      this.formInline.goodsName = '';
      this.listQuery.current = 1;
      this.search();
    },
    closed() {
      this.checkList = [];
    },
    search() {
      this.tableLoading = true;
      let data = {
        size: this.listQuery.size,
        current: 1,
        condition: {
          goodsName: this.formInline.goodsName,
          status: this.formInline.status,
        },
        ascs: [],
        descs: []
      };
      getProductList(data).then(res => {
        if (res.code == 1) {
          this.tableData = res.records;
          this.tableData.forEach((item, i) => {
            item.tagTypes = item.tagType && item.tagType.length > 0 ? item.tagType.split(",") : [];
          });

          this.total = res.total;

          this.$nextTick(() => {
            this.checkList.forEach(item => {
              this.tableData.forEach((tableItem) => {
                if (item.goodsId == tableItem.goodsId) {
                  this.$refs.multipleTableRef.toggleRowSelection(tableItem);
                }
              });
            });
          })
        }
      }).finally(() => {
        this.tableLoading = false;
      });
    },
    handleSizeChange(val) {
      this.listQuery.current = 1;
      this.listQuery.size = val;
      this.search();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.search();
    },
    fixData(row, column, cellValue, index) {
      if (cellValue != null && !isNaN(cellValue)) {
        return cellValue.toFixed(2);
      } else {
        return cellValue;
      }
    },

    handleSelectionChange(val) {
      const checkedOrgArr = [...this.checkList, ...val];
      const checkedArr = Array.from(
        new Map(checkedOrgArr.map(item => [item.goodsId, item])).values()
      );
      this.checkList = checkedArr
    },

    handleConfirm() {
      this.$emit('confirm', this.checkList);
      this.dialogVisible = false;
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-wrapper {
  display: flex;
  flex-direction: column;

  &__header {
    &--query {
      display: flex;
      align-items: center;
      gap: 20px;

      .query-item {
        display: flex;
        align-items: center;
        gap: 10px;
        white-space: nowrap;
      }
    }
  }

  &__content {
    flex: 1;
    margin-top: 20px;
    overflow: auto;
  }
}

.dialog-footer {
  &__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

/deep/ .el-dialog__body {
  padding: 10px 20px;
}
</style>